import React from 'react'
import {formatAsiaOdd} from "../../game-room/components/Main/index/AsiaOddsTable/AsiaOddsTable";
import {formatDXQOdd} from "../../game-room/components/Main/index/BigSmallTable/BigSmallTable";
import {formatEuroOdds} from "../../game-room/components/Main/index/EuroOddsTable/EuroOddsTable";
import {getPercentsArrayFromOddsArray} from "../plan-detail";
import {
    loseColor,
    tiedColor,
    winColor
} from "../../game-room/components/Main/analysis/companents/RecordTable/RecordTable";

class PlanPercents extends React.Component {
    render() {
        const plan = this.props.planData
        const rateArr = [...plan.Yuce]
        const yuceKey = plan.yuceKey
        const yuceKeys = {
            'bs': '大小球',
            'asia': '让球',
            'eu': '胜平负',
        }
        const percentArray = getPercentsArrayFromOddsArray(rateArr, yuceKey)
        const yellowBlock = <div
            style={{
                width: '4px',
                height: '14px',
                background: '#FFA500',
                marginRight: '6px',
            }}
        />
        const yuceTitle = yuceKeys[yuceKey]
        const oddFormatters = {
            asia: (array) => formatAsiaOdd(array[1]),
            bs: (array) => formatDXQOdd(array[1]),
            eu: (array) => formatEuroOdds(array),
        }
        const colors = [winColor, tiedColor, loseColor,]
        const texts = {
            asia: ['主胜概率', '', '客胜概率',],
            bs: ['大球概率', '', '小球概率',],
            eu: ['胜概率', '平概率', '负概率',],
        }

        return <>
            <div className="flex mg-b-12px">
                {yellowBlock}
                <p className="mg-r-12px">
                    {yuceTitle}
                </p>
                <span className='gray-text'>{oddFormatters[yuceKey](rateArr)}</span>
            </div>

            <div className='flex mg-b-8px' style={{width: '100%', height: '12px',}}>
                {percentArray.map((p, index) => <div
                    key={index}
                    style={{width: `${p}%`, backgroundColor: colors[index], height: '12px',}}
                />)}
            </div>
            <div className="flex-space-between-align-center">
                {percentArray.map((p, index) => {
                    if (p === 0) return null
                    return <p style={{color: colors[index],}} key={index}>
                        {`${texts[yuceKey][index]}：${p}%`}
                    </p>
                })}
            </div>
        </>
    }
}

export default PlanPercents